/**
 * Created by Ysssssss on 2021/4/14.
 */

import React, {useCallback, useState, useContext, forwardRef} from 'react'
import CustomizeModal, {CustomizeModalButton, CustomizeModalContext} from "@common/presentational/CustomizeModal";
import { Select, Row } from "antd";

const ChangeProductTypeModal = props => {
    const { hide } = useContext(CustomizeModalContext)
    const { selectionList = [] } = props
    const [ productType, setProductType ] = useState('')

    const handleProductTypeChange = useCallback(value => {
        setProductType(value)
    }, [])

    const submitProductType = () => {
        console.log('submitProductType', productType)
        hide()
    }

    return (
        <>
            <Row className="modal-line">
                <Select onChange={handleProductTypeChange}
                        value={productType}
                >
                    { selectionList.map(group => (
                        <Select.OptGroup key={group.id} label={group.name}>
                            { group.sub.map(productType => (
                                <Select.Option
                                    key={productType.id}
                                    value={productType.id}
                                >
                                    { productType.name }
                                </Select.Option>
                            )) }
                        </Select.OptGroup>
                    ))}
                </Select>
            </Row>
            <CustomizeModalButton
                onOk={submitProductType}
                onCancel={hide}
            />
        </>
    )
}

export default forwardRef((props, ref) => (
    <CustomizeModal title="修改分类" ref={ref}>
        <ChangeProductTypeModal {...props}/>
    </CustomizeModal>
))